<template>
  <div>
    <div>
      <h3>【useScroll】响应式滚动条:{{}}</h3>
      <div ref="refScroll" class="scrollBox">
        <h1>1wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</h1>
        <h1 style="height:100px">1</h1>
        <h1 style="height:100px">1</h1>
        <h1 style="height:100px">1</h1>
      </div>
      <button @click="add">+</button>
      <div>当前Y值:{{y}}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useScroll } from '@vueuse/core';
const refScroll = ref<HTMLElement | null>(null);
const { x, y, arrivedState } = useScroll(refScroll);

function add() {
  y.value += 100;
}
</script>
<style scoped>
.scrollBox {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  overflow: scroll;
}
</style>
